<script setup>
import { Head, Link, router } from '@inertiajs/vue3'
import AdminLayout from '@/Layouts/AdminLayout.vue'
import Pagination from '@/Components/UI/Pagination.vue'
import { ref } from 'vue'
import { 
    ArrowLeftIcon,
    ClockIcon,
    EyeIcon,
    ArrowPathIcon,
    DocumentTextIcon,
    UserIcon
} from '@heroicons/vue/24/outline'
import { useToast } from '@/Composables/useToast'
import ConfirmDialog from '@/Components/UI/ConfirmDialog.vue'

const props = defineProps({
    post: {
        type: Object,
        required: true
    },
    revisions: {
        type: Object,
        required: true
    }
})

const toast = useToast()
const showRestoreConfirm = ref(false)
const revisionToRestore = ref(null)

// 格式化日期
const formatDate = (date) => {
    if (!date) return '未知'
    return new Date(date).toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
    })
}

// 确认恢复
const confirmRestore = (revision) => {
    revisionToRestore.value = revision
    showRestoreConfirm.value = true
}

// 执行恢复
const restoreRevision = () => {
    if (!revisionToRestore.value) return

    router.post(route('admin.posts.revisions.restore', [props.post.slug, revisionToRestore.value.id]), {
        onSuccess: () => {
            toast.success('版本恢复成功！')
            showRestoreConfirm.value = false
            revisionToRestore.value = null
        },
        onError: (errors) => {
            console.error('恢复失败：', errors)
            const errorMessage = errors?.error || errors?.message || '恢复失败，请重试'
            toast.error(errorMessage)
        }
    })
}

// 取消恢复
const cancelRestore = () => {
    showRestoreConfirm.value = false
    revisionToRestore.value = null
}
</script>

<template>
    <AdminLayout>
        <Head :title="`${post.title} - 版本历史`" />

        <div class="space-y-6">
            <!-- 页面头部 -->
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-x-4">
                    <Link
                        :href="route('admin.posts.index')"
                        class="inline-flex items-center rounded-md p-2 text-gray-400 hover:text-gray-500 hover:bg-gray-100 transition-colors"
                    >
                        <ArrowLeftIcon class="h-5 w-5" />
                        <span class="sr-only">返回</span>
                    </Link>
                    <div>
                        <h1 class="text-3xl font-bold text-gray-900">版本历史</h1>
                        <p class="mt-2 text-sm text-gray-600">
                            {{ post.title }}
                        </p>
                    </div>
                </div>
            </div>

            <!-- 版本列表 -->
            <div class="bg-white rounded-lg border border-gray-200 shadow-sm">
                <div class="px-6 py-4 border-b border-gray-200">
                    <div class="flex items-center gap-x-3">
                        <div class="h-10 w-10 rounded-lg bg-orange-100 flex items-center justify-center">
                            <DocumentTextIcon class="h-6 w-6 text-orange-600" />
                        </div>
                        <div>
                            <h2 class="text-lg font-semibold text-gray-900">版本历史</h2>
                            <p class="mt-1 text-sm text-gray-600">共 {{ revisions.meta?.total || 0 }} 个版本</p>
                        </div>
                    </div>
                </div>
                <div class="divide-y divide-gray-200">
                    <div
                        v-for="revision in revisions.data"
                        :key="revision.id"
                        class="px-6 py-4 hover:bg-gray-50 transition-colors"
                    >
                        <div class="flex items-center justify-between">
                            <div class="flex items-center gap-x-4">
                                <div class="h-10 w-10 flex-shrink-0">
                                    <div v-if="revision.user?.avatar" class="h-10 w-10 rounded-full overflow-hidden">
                                        <img
                                            :src="revision.user.avatar"
                                            :alt="revision.user.name"
                                            class="h-full w-full object-cover"
                                        >
                                    </div>
                                    <div v-else class="h-10 w-10 rounded-full bg-orange-100 flex items-center justify-center">
                                        <UserIcon class="h-6 w-6 text-orange-600" />
                                    </div>
                                </div>
                                <div class="min-w-0 flex-1">
                                    <div class="flex items-center gap-x-2">
                                        <p class="text-sm font-medium text-gray-900">
                                            {{ revision.user?.name || '未知用户' }}
                                        </p>
                                    </div>
                                    <div class="mt-1 flex items-center gap-x-2 text-sm text-gray-500">
                                        <ClockIcon class="h-4 w-4" />
                                        <span>{{ revision.created_at?.human || formatDate(revision.created_at?.formatted) }}</span>
                                    </div>
                                    <div v-if="revision.reason" class="mt-2">
                                        <p class="text-sm text-gray-600">
                                            <span class="font-medium">修改原因：</span>{{ revision.reason }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center gap-x-2">
                                <Link
                                    :href="route('admin.posts.revisions.show', [post.slug, revision.id])"
                                    class="inline-flex items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
                                >
                                    <EyeIcon class="h-4 w-4" />
                                    查看差异
                                </Link>
                                <button
                                    @click="confirmRestore(revision)"
                                    class="inline-flex items-center gap-x-1.5 rounded-md bg-orange-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-orange-500"
                                >
                                    <ArrowPathIcon class="h-4 w-4" />
                                    恢复此版本
                                </button>
                            </div>
                        </div>
                    </div>
                    <div v-if="revisions.data?.length === 0" class="px-6 py-12 text-center text-sm text-gray-500">
                        <DocumentTextIcon class="mx-auto h-12 w-12 text-gray-400" />
                        <h3 class="mt-2 font-medium text-gray-900">没有版本历史</h3>
                        <p class="mt-1 text-gray-500">此文章还没有版本历史记录。</p>
                    </div>
                </div>
            </div>

            <!-- 分页 -->
            <div v-if="revisions.meta && revisions.meta.last_page > 1" class="mt-6">
                <Pagination :links="revisions.meta.links || []" />
            </div>
        </div>

        <!-- 恢复确认对话框 -->
        <ConfirmDialog
            :show="showRestoreConfirm"
            title="恢复版本"
            content="确定要恢复到此版本吗？当前版本的内容将被替换。"
            confirm-text="恢复"
            cancel-text="取消"
            @confirm="restoreRevision"
            @close="cancelRestore"
        />
    </AdminLayout>
</template> 